import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { DatePicker } from '@ant-design/react-native';
import PropTypes from 'prop-types';
import handleData from './handleData';

class PickerGS extends Component {
    static propTypes = {
      title: PropTypes.string,
      gsMinute: PropTypes.number,
      sectionIdx: PropTypes.number,
      projectIdx: PropTypes.number,
      packIdx: PropTypes.number,
      disabled: PropTypes.bool,
      onGSPicked: PropTypes.func,
    };

    constructor(props) {
      super(props);
      this.state = {};
      this.onChange = this.onChange.bind(this);
      this.minuteToDate = this.minuteToDate.bind(this);
    }

    onChange(value) {
      const date = new Date(value);
      const hour = date.getHours();
      const minute = date.getMinutes();
      const intMinute = hour * 60 + minute;
      this.props.onGSPicked(this.props.sectionIdx, this.props.projectIdx, this.props.packIdx, intMinute);
    }

    minuteToDate() {
      let hour = 0;
      let minute = 0;
      if (this.props.gsMinute) {
        hour = Math.floor(this.props.gsMinute / 60);
        minute = this.props.gsMinute - hour * 60;
      }
      // console.log('minuteToDate gsMinute ' + this.props.gsMinute + ' hour' + hour + '  minute:', minute);
      return new Date(`2020/05/20 ${hour}:${minute}`);
    }

    render() {
      let view = <Text style={styles.placeholder}>请选择</Text>;
      if (this.props.gsMinute) {
        view = <Text style={styles.hourText}>{handleData.minuteToHour(this.props.gsMinute)}</Text>;
      }
      return (
        <View style={styles.container}>
          <DatePicker
            disabled={this.props.disabled}
            title={`${this.props.title.substr(0, 5)}...`}
            value={this.minuteToDate()}
            mode="time"
            defaultDate={new Date('2020/05/20 00:00')}
            minuteStep={10}
            minDate={new Date('2020/05/20 00:00')}
            maxDate={new Date('2020/05/20 23:50')}
            onChange={this.onChange}
            format="HH:mm"
          >
            {view}
          </DatePicker>
        </View>
      );
    }
}
const styles = StyleSheet.create({
  container: {
    // backgroundColor: 'red'
  },
  placeholder: {
    fontSize: 14,
    color: '#9B9B9B',
  },
  hourText: {
    fontSize: 14,
    color: '#000000',
  },
});
export default PickerGS;
